<template>

  <div class="home">
    <head-hang @showFlapCard="showFlapCard"></head-hang>
    <flap-card :data="random" @close="closeFlapCard" v-if="ifFlapCardShow"></flap-card>
    <scroll>


    <div class="home-head">
      <div class="home-left"><DaoHang/></div>
      <div class="home-right"><RunHourse/></div>

    </div>
    <div class="contentf">
        <div class="content-Zhubian" ><zhubian :data="guess"></zhubian></div>


        <div class="content-Guofeng"><Guofeng/></div>
<!--        //<div class="content-Qingyue"><Category :data="featured"></Category></div>-->
        <div class="content-Jingpin"><Jingpin/></div>

    </div>

    </scroll>
  </div>

</template>

<script>
// @ is an alias to /src
import RunHourse from '@/components/RunHourse'
import DaoHang from '@/components/DaoHang'
import HeadHang from '@/components/HeadHang'
import Guofeng from '@/components/GuoFeng/Guofeng'
import Jingpin from '@/components/JingPin/Jingpin'
//import Category from '@/components/home/Category'
import Zhubian from '@/components/ZhuBian/Zhubian'
import Scroll from '@/components/Scroll'
import FlapCard from '@/components/FlapCard'
import { home } from "../api/store";

export default {
  name: 'Home',
  components: {
    HeadHang,
    RunHourse,
    DaoHang,
    Guofeng,
    //Category,
    Jingpin,
    Zhubian,
    Scroll,
    FlapCard,
  },
    data() {
      return {
          random:null,
          ifFlapCardShow: false,
          guess:null,
          featured:null,
      }
    },
    methods:{
        showFlapCard() {
            this.ifFlapCardShow = true
        },
        closeFlapCard() {
            this.ifFlapCardShow = false
        },
    },
    watch:{
        // eslint-disable-next-line no-unused-vars
      $route(to,from){
          this.$router.go(0);
      }
    },
   mounted(){


      home().then(response =>{
          console.log(123123)
          if (response && response.status ===200) {

              const data = response.data
              console.log(data)
              const randomIndex = Math.floor( Math.random()*data.random.length)
              this.random = data.random[randomIndex]
              this.guess = data.guessYouLike
              this.featured = data.featured

          }
      })
}
}
</script>
<style>
*{
    box-sizing: content-box;
}
  .home{
    width: 980px;
    margin: 0 auto;
    margin-bottom: 200px;
  }
  .home::after{
    content: "";
    display: block;
    clear: both;

  }
  .home-head::after{
    content: "";
    display: block;
    clear: both;

  }
  .home-left{
    width: 236px;
    float: left;
    border: 2px solid #e0dcd7;
    z-index: 8;
    padding-bottom: 2px;
  }
  .home-right{
    width: 720px;
    float:right;
  }
  .content-Jingpin{
    padding-bottom:500px!important;
  }
</style>
